<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

</style>
<body>
    <p class="title">诗经</p>
    <div class="box">蒹葭苍苍，白露<em>为霜</em>
        所谓伊人 在水一方
    </div>
   
</body>
<script>
    const em1 = document.querySelector('.title');
    const em2 = document.querySelector('.box');
    console.log(em1.innerHTML);
    console.log(em2.innerHTML);    //含标签
    console.log(em1.innerText);
    console.log(em2.innerText);    //纯不含标签，文本内容，不保留换行、空格等格式
    console.log(em1.textContent);
    console.log(em2.textContent);   //纯文本内容，保留换行、空格等格式
    em1.innerHTML = '诗经<strong>小雅</strong>';
    em1.innerText = '诗经<em>小雅</em>' ;
    em1.textContent = '诗经<br>小雅</br>' ;
</script>
</html>